<template>
  <div id="pageTop" class="page open-payment">
    <div class="scroll-view">
      <customHeader :middleTitle="middleTitle" v-if="headerVisible" @leftCallBack="pageBack" />
      <div class="page-body main-page-body" @scroll="CommonUtil.modifyFocusWhenScroll()">
        <noticeBar
          type="error"
          v-if="formData['summaryExamineStatus'] == 3 || formData['summaryExamineStatus']  == 7|| formData['summaryExamineStatus']== 11"
        >
          <p>驳回原因：{{formData["summaryExamineDesc"]}}</p>
        </noticeBar>
        <!-- progress-bar start -->
        <div class="progress-bar">
          <div :class="`step ${step1Status}`">
            <img :src="getStepStatusImgUrl(step1Status)" alt />
            <br />
            <span>门店信息</span>
          </div>
          <div v-if="step1Status == 'finish'" class="finish-line"></div>
          <div v-else class="split-line"></div>
          <div :class="`step ${step2Status}`">
            <img :src="getStepStatusImgUrl(step2Status)" alt />
            <br />
            <span>银行卡信息</span>
          </div>
          <div v-if="step2Status == 'finish'" class="finish-line"></div>
          <div v-else class="split-line"></div>
          <div :class="`step ${step3Status}`">
            <img :src="getStepStatusImgUrl(step3Status)" alt />
            <br />
            <span>费率信息</span>
          </div>
        </div>
        <div class="ct">
          <openPaymentStep1
            v-if="step1Status == 'ongoing'"
            @backDataModel="backData"
            :initialData="formData"
            :dictionaryData="dictionaryData"
            :query="query"
            @nextStep="nextStep"
          />
          <openPaymentStep2
            v-if="step2Status == 'ongoing'"
            @modelRturn="modelRturn"
            @backDataModel="backData"
            :initialData="formData"
            :dictionaryData="dictionaryData"
            :editorType="query['editorType']"
            :query="query"
            @nextStep="nextStep"
          />
          <openPaymentStep3
            v-if="step3Status == 'ongoing'"
            @modelRturn="modelRturn"
            @backDataModel="backData"
            :initialData="formData"
            :query="query"
            :dictionaryData="dictionaryData"
            :hasOpen="hasOpen"
          />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import customHeader from "../../components/header/header";
import openPaymentStep1 from "./openPaymentStep1";
import openPaymentStep2 from "./openPaymentStep2";
import openPaymentStep3 from "./openPaymentStep3";
import selectBranch from "./selectBranch";
import noticeBar from "../../components/noticeBar/noticeBar";
import { DatetimePicker, Toast, MessageBox } from "mint-ui";

export default {
  name: "openPayment",
  props: {
    //指定类型
    shopID: String,
    //指定类型和是否必须
    supplierId: String
  },
  data() {
    return {
      CommonUtil: CommonUtil,
      //进度状态 ongoing-进行中 wait-未开始 finish-已完成
      step1Status: 'ongoing',
      step2Status: 'wait',
      step3Status: 'wait',
      selectBranchVisible: true,
      headerVisible: true,
      formData: {},
      dictionaryData: {},
      feelInitialData: {},//0无，1商户运营鼓励金，2阶梯费率
      middleTitle: "开通支付",
      query: {},
      hasOpen:{
        '01': true,
        '02': true,
        '03': true,
        '04': true,
      },
    };
  },
  computed: {
    // 驳回原因
    // rejectMsg() {
    //   let msg = "";
    //   if (this.query['editorType'] == "1") {
    //     msg = "驳回原因：" + this.formData["examineDesc"];
    //   }
    //   return msg;
    // }
  },
  mounted() {
    // console.log(props.shopID,'aaaawwwwwww');
    //我注销的
    // $('.mask')[0].addEventListener('touchmove', function (e) {
    //   e.preventDefault();
    // }, false);
    console.log(this.$route.query,'aaaaaaaaaaaaaaaaa');
    // this.query = this.$route.query;     //我注销的
    this.query = {
      editorType:"0",
      includeSimilarEntry: false,
      recordId: "",
      shopId: "20230719162832294477",
      supplierId: "2099230719210926"
    }
    this.query['editorType'] = this.query['editorType'] || '0';  // 0 首次进件  1重新编辑
    this.query['recordId'] = this.query['recordId'] || '';
    this.getMerchantDetail();
    this.getCommonsEnumeration();
  },
  methods: {
    modelRturn(flag) {
      this.headerVisible = !flag;
    },
    //每页返回的数据封装到主页的formData
    backData(val) {
      if (val.feelData) {
        if (this.query['code'] || this.query['page'] == 'ratesChangeApply') {
          const feelData1 = Object.assign({}, val.feelData);
          //payType（01：支付宝 02：微信）
          if (this.query['payType'] == 2) {
            feelData1.payType = '01';
          } else if (this.query['payType'] == 5) {
            feelData1.payType = '02';
          }
          this.formData.feeModels = [feelData1];
        } else {
          const feelData1 = Object.assign({}, val.feelData);
          feelData1.payType = '01';
          const feelData2 = Object.assign({}, val.feelData);
          feelData2.payType = '02';
          this.formData.feeModels = [feelData1, feelData2];
        }
        return
      }
      if (val.additionalData) {
        this.formData.detailModel = Object.assign({}, this.formData.detailModel, val.additionalData);
        return
      }
      if (val.detailModel) {
        this.formData.detailModel = Object.assign(this.formData.detailModel, val.detailModel);
        return
      }
      if (val.bankcardModel) {
        this.formData.bankcardModel = Object.assign(this.formData.bankcardModel, val.bankcardModel);
        return
      }
    },
    //首次进件校验许可
    //我注销的
    // permission() {
    //   this.ajax({
    //     type: "get",
    //     url: "/merchant/info/verify/first/open/permission.do?supplierId=" + this.supplierId + "&shopId=" + this.shopId,
    //     controlLoading: false
    //   })
    //     .then((response) => {
    //       if (response && response.success) {
    //         if (response.resultObject) {
    //           this.getMerchantDetail();
    //           this.getCommonsEnumeration();
    //         } else {
    //           MessageBox.close(false);
    //           MessageBox.alert(response.msg).then(action => {
    //             this.$router.back(-1);
    //           });
    //         }
    //       } else {
    //         MessageBox.close(false);
    //         MessageBox.alert("获取校验许可失败").then(action => {
    //           this.$router.back(-1);
    //         });
    //       }
    //     })
    //     .catch((err) => {
    //     });
    // },
    // 初始化数据
    getMerchantDetail() {
      let url = "";
      let params = {};

      if (this.query['editorType'] == '0') {
        // if (this.query['includeSimilarEntry'] == true || this.query['includeSimilarEntry'] == false) {  //includeSimilarEntry:  true 使用相同资质已进件门店的信息   false不使用   null没有查到具有相同资质进件信息的门店（正常的开通支付）
        //url = "/merchant/info/init/first/data.do";
        console.log('a1121321311321212313');
        url ="/merchant/info/init/first/data.do";
        params = {
          shopId: this.query['shopId'],
          supplierId: this.query['supplierId'],
          includeSimilarEntry: this.query['includeSimilarEntry'],
        }
        // }
      } else {
        url = "/merchant/info/query/apply/entry/detail.do";
        if (this.query['code']) {
          params = {
            shopId: this.query['shopId'],
            supplierId: this.query['supplierId'],
            readOnly:false,
            recordId: this.query['recordId'] || '',
          }
          this.middleTitle = "补充进件信息";
        } else if (this.query['page'] == 'ratesChangeApply') {
          params = {
            shopId: this.query['shopId'],
            supplierId: this.query['supplierId'],
            readOnly:false,
            recordId: this.query['recordId'] || '',
          }
          this.middleTitle = "编辑进件信息";
        } else {
          params = {
            shopId: this.query['shopId'],
            supplierId: this.query['supplierId'],
            readOnly:false,
            recordId: this.query['recordId'] || '',
          }
        }
      }
      //如果是开通其它支付方式跳过来的 展示成补充进件信息
      if(this.query['rateToOpenPay'] && this.query["page"] != "ratesChangeApply"){
        this.middleTitle = "补充进件信息";
        url = "/merchant/info/init/supply/data.do";
        params = {
          shopId: this.query.shopId,
          supplierId: this.query.supplierId,
          payType: this.query.payType
        };
      }
      this.ajax({
        type: "get",
        url: url,
        data: params,
        controlLoading: false
      })
        .then((response) => {
          if (response && response.success) {
            const res = response.resultObject;
            this.formData = res;

            let feeModels = [];
            if(this.query.editorType==1) {
              this.query.payTypes && this.formData.feeModels.forEach(item=> {
                this.query.payTypes.includes(item.payType) && feeModels.push(item)
              })
            }
            this.formData.feeModels = feeModels;

            this.formData.feeModels.map((item)=>{
              if(item.merchantType==3||item.merchantType==4||item.merchantType==11){
                this.hasOpen[item.payType] = true;
              }
            });
          } else {
            Toast("获取进件详情失败");
            this.$router.back(-1);
          }
        })
        .catch((err) => {
          this.$router.back(-1);
        });
    },
    //获取公共枚举字典
    getCommonsEnumeration() {
      CommonUtil.getDictData().then(response => {
        if (response && response.success) {
          const res = response.resultObject;
          this.dictionaryData = res;
        } else {
          MessageBox.close(false);
          MessageBox.alert("获取查询字典失败,请稍后重试！").then(action => {
            this.$router.back(-1);
          });
        }
      });
    },
    getStepStatusImgUrl(status) {
      switch (status) {
        case 'ongoing':
          return require("../../assets/images/current-circle.png");
          break;
        case 'wait':
          return require("../../assets/images/disabled-circle.png");
          break;
        case 'finish':
          return require("../../assets/images/default-circle.png");
          break;
        default:
          return require("../../assets/images/current-circle.png");
      }
    },
    pageBack() {
      $('.page-body').scrollTop(0);
      if (this.step1Status == 'ongoing') {
        this.$router.back(-1);
      }
      if (this.step2Status == 'ongoing') {
        this.step1Status = 'ongoing';
        this.step2Status = 'wait'
      }
      if (this.step3Status == 'ongoing') {
        if (this.query['code'] || this.query['page'] == 'ratesChangeApply') {
          this.step2Status = 'ongoing';
          this.step3Status = 'wait'
        } else {
          if(this.formData['isEntryStatus']=='0'){
            MessageBox.close(false);
            MessageBox.confirm('<div style="text-align:center">返回后已设置的费率信息</div><div style="text-align:center">将被重置，是否确认返回?</div>').then(action => {
              if (action == 'confirm') {
                // this.formData.feeModels.map((item) => {
                //   item.feeValue = '';
                //   item.merchantType = '';
                //   item.merchantTypeName = '';
                //   item.expiryTime = '';
                //   item.encourageStatus = 2;
                // })
                this.formData.feeModels=[];
                this.formData.channelType = '';
                this.formData.channelTypeName = '';
                this.formData.openChannelType = '';
                this.formData.openChannelTypeName = '';
                this.step2Status = 'ongoing';
                this.step3Status = 'wait'
              }
            });
          }else{
            this.step2Status = 'ongoing';
            this.step3Status = 'wait'
          }
        }
      }
    },
    //下一步子组件向父组件传值
    nextStep(step) {
      $('.page-body').scrollTop(0);
      if (step == '1') {
        this.step1Status = 'finish';
        this.step2Status = 'ongoing';
        this.step3Status = 'wait';
        return
      }
      if (step == '2') {
        this.step1Status = 'finish';
        this.step2Status = 'finish';
        this.step3Status = 'ongoing';
        return
      }
    }
  },

  computed: {},
  components: {
    customHeader,
    openPaymentStep1,
    openPaymentStep2,
    openPaymentStep3,
    selectBranch,
    noticeBar
  }
};
</script>
<style lang='scss' scoped>
@import "openPayment";
@import './openPay.scss'
</style>
